<template>
  <div class="ContractBoard_box">
    <div class="el_row_col">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="grid-content">
            <div class="headerTitle"  >
              <div class="navbar">
                <span style="font-weight: bold;padding-right: 20px;" >契约合同</span>
                <div :class="titleClickIndex === index ? 'isTitleClick navitem' : 'navitem'" v-for="(titleData, index) in titleData"  :key="index"
                     @click="titleClick(index,titleData.path)">
                  {{ titleData.name }}
                </div>
              </div>
              <el-button type="primary" style="margin-right: 10px" size="small" @click="newContract">新建合同</el-button>
            </div>
            <div v-for="(obj,index) in contractList" :key="index" class="contract_for">
<!--                {{obj.name}},{{obj.createTime}},{{obj.contractAmount}},{{obj.FinishedOutputValue}}-->
              <i class="el-icon-user-solid"></i> <span>{{obj.name}}</span> <a>合同正文预览</a><a>查看付款节点</a><a>进入项目<i class="el-icon-arrow-down"></i></a><a>项目分析表</a>
              <br>
              <div>
                签订日期:{{obj.createTime}}&nbsp; 合同日期:{{obj.contractAmount}}万 &nbsp; 完成产值:{{obj.FinishedOutputValue}}万
              </div>
            </div>
            <div style="padding-bottom: 30px"></div>

<!--            <TitleHeader :titleData="titleData"></TitleHeader>-->
<!--            <keep-alive>-->
<!--              <router-view></router-view>-->
<!--            </keep-alive>-->
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content">
            <div class="navbar" style="margin-left: 10px">
              <span style="font-weight: bold;padding-right: 20px;" >已交付合同</span>
              <div :class="titleClickIndex === index ? 'isTitleClick navitem' : 'navitem'" v-for="(titleData, index) in titleData"  :key="index"
                   @click="titleClick(index,titleData.path)">
                {{ titleData.name }}
              </div>
            </div>
            <div v-for="(obj,index) in contractList" :key="index" class="contract_for">
              <!--                {{obj.name}},{{obj.createTime}},{{obj.contractAmount}},{{obj.FinishedOutputValue}}-->
              <i class="el-icon-user-solid"></i> <span>{{obj.name}}</span> <a>合同正文预览</a><a>查看付款节点</a><a>进入项目<i class="el-icon-arrow-down"></i></a><a>项目分析表</a>
              <br>
              <div>
                签订日期:{{obj.createTime}}&nbsp; 合同日期:{{obj.contractAmount}}万 &nbsp; 完成产值:{{obj.FinishedOutputValue}}万
              </div>
            </div>
            <div style="padding-bottom: 30px"></div>

            <!--            <TitleHeader :titleData="titleData"></TitleHeader>-->
            <!--            <keep-alive>-->
            <!--              <router-view></router-view>-->
            <!--            </keep-alive>-->
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import TitleHeader from '@/views/contract/contractBoard/components/ContractBoardTitleHeader.vue'

export default {
  name: 'ContractBoard.vue',
  // eslint-disable-next-line vue/no-unused-components
  components: { TitleHeader },
  data () {
    return {
      // 标题数据
      titleData: [
        // { name: '契约合同', path: '/contract' },
        { name: '今年', path: '/thisYear' },
        { name: '去年', path: '/lastYear' },
        { name: '2019年', path: '/year2019' },
        { name: '2018年', path: '/year2018' },
        { name: '更多', path: '/more' }
      ],
      titleClickIndex: 0,
      // 合同条
      contractList: [],
      contract: {
        // 测试手动
        name: '',
        // 签订日期
        createTime: '',
        // 合同额
        contractAmount: '',
        // 完成产值
        FinishedOutputValue: ''
      }
    }
  },
  created () {
    this.titleClick()
  },
  methods: {
    newContract () {
      console.log('新增合同点击')
      // const data = 'newContract'
      // this.$emit('childEvent')
      this.$parent.currentComponent = 'newContract'
    },
    titleClick (index, path) {
      if (index === 4) {
        this.$emit('send-data-to-parent', 'ContractList')
        return
      }
      // 发送请求
      this.titleClickIndex = index
      const contract1 = {
        name: 'Contract 1',
        createTime: '2023-07-12',
        contractAmount: 100000,
        FinishedOutputValue: 80000
      }
      for (let i = 0; i < 10; i++) {
        this.contractList.push(contract1)
      }
    }
  }
}
</script>

<style scoped>
.navitem{
  margin: 0px 5px;
}
.navbar{
  width: 100% !important;
  height: 100% !important;
  display: flex;
  align-items: center;
  font-size: 14px;
}
.ContractBoard_box{
  background-color: #e9edf7;
  padding-top: 20px;
}
.grid-content{
  //height: 500px;
  background-color: #ffffff;
  padding-top: 20px;
  margin-bottom: 20px;
}
.el_row_col{
  margin-left: 10px;
  margin-right: 10px;
}
/*.navitem:hover{*/
/*  color:"red"*/
/*}*/
.isTitleClick {
  color: rgb(39, 140, 255);
  border-bottom: 1px solid rgb(39, 140, 255);
  white-space: nowrap;
  text-align: center;
}
.isTitleClick :hover{
  color: rgb(39, 140, 255);
  border-bottom: 1px solid rgb(39, 140, 255);
  white-space: nowrap;
}
.headerTitle {
  /*border-bottom: 1px solid #f8f8f8;*/
  /*box-shadow: 0px 4px 4px #f8f8f8;*/
  transition: border-color 0.3s; /* 添加过渡效果 */
  display: flex;
  font-size: 10px;
  text-align: center;
  margin-left: 10px;
  display: grid;
  grid-template-columns: 10fr 1fr;
}
.navbar div:not(.isTitleClick):hover{
  /* CSS 样式 */
  color: rgb(39, 140, 255);
}
.headerTitle>div {
  cursor: pointer;
  height: 20px;
  width: 50px;
  text-align: center;
}
.contract_for{
  margin-left: 40px;
  margin-top: 30px;
}
.contract_for span{
  font-weight: bolder;
}
.contract_for a{
  font-size: 9px;
  color: #56b7ff;
  margin-left: 20px;
}
.contract_for div{
  padding-top: 5px;
  color: gray;
  font-size: 10px;
}
/*.headerTitle {*/
/*  display: flex;*/
/*  justify-content: space-between;*/
/*  align-items: center;*/
/*}*/

/*.headerTitle .el-button {*/
/*  order: 1;*/
/*}*/
</style>
